<!-- 模板 -->
<template>
  <div class="partner">
    <div class="box">
          <div class="btn">
              <div style="padding:10px">
                <el-form  :inline="true"  :model="params" size="small"  label-width="100px" >
                    <el-form-item label="合作商名称:">
                        <el-input  v-model="params.name" placeholder="输入合作商"  clearable @clear="search" /> 
                    </el-form-item>
                    <el-form-item label="联系方式:">
                        <el-input  v-model="params.phone" placeholder="输入联系方式"  clearable @clear="search" /> 
                    </el-form-item>
                    <span style="margin-left:10px">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
                        <!-- <el-button @click="handleLookClick()" type="primary" icon="el-icon-view" size="small" plain>查 看</el-button> -->
                    </span>
                </el-form>
              </div>
          </div>
        <el-card>
            <el-table :data="tableData" border style="width: 100%" >
            <el-table-column type="index" label="序号" align="center"> </el-table-column>
            <el-table-column prop="name" label="真实姓名" align="center"> 
                <!-- <template slot-scope="scope">
                    <el-link   @click="chakan(scope.row)">{{scope.row.name}}</el-link>
                </template> -->
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" align="center" > </el-table-column>
            <!-- <el-table-column prop="logo" label="大图" align="center" >
                <template slot-scope="scope">
                    <el-image  style="width: 80px;" :src="showUrl +scope.row.logo"  :preview-src-list="[showUrl +scope.row.logo]"> </el-image>
                </template>
            </el-table-column> -->
            <el-table-column prop="tableCount" label="合作个数" align="center" width="180"> </el-table-column>
            <el-table-column prop="createTime" label="时间" align="center" width="180"> </el-table-column>
            <el-table-column prop="content" label="备注" align="center" :show-overflow-tooltip="true" width="320"> </el-table-column>

            <el-table-column  label="操作" align="center" width="350">
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                     <el-button
                type="primary"
                size="small"
                plain
                icon="el-icon-circle-plus-outline"
                @click="addSelect(scope.row)" >添加合作量表
                </el-button>
                    <!-- <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small" icon="el-icon-delete" >删 除</el-button> -->
                    <el-button @click="handleLookClick(scope.row)" type="primary" icon="el-icon-view" size="small" plain>查 看</el-button>
                </template>
            </el-table-column>
        </el-table>
        </el-card>
        <pagination
        v-show="total >0"
       :total="total"
       :page.sync="params.pageNum"
       :limit.sync="params.pageSize"
       @pagination="getList"
      />
      </div>

<!-- 修改弹窗 -->
<el-dialog title="修改" :visible.sync="outerVisible" width="35%">
  <el-form label-width="120px" :model="form" :rules="rules" ref="form">
            <el-form-item label="真实姓名" prop="name">
                <el-input v-model="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input v-model="form.phone" ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="content">
                <el-input v-model="form.content" ></el-input>
            </el-form-item>
            <!-- <el-form-item >
                 <el-button
                type="primary"
                size="small"
                icon="el-icon-circle-plus-outline"
                @click="addSelect" >添加合作量表
                </el-button>
            </el-form-item> -->
        </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="outerVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit1">确 定</el-button>
    </div>
  </el-dialog>

      <el-dialog
      width="30%"
      title="添加合作量表"
      :visible.sync="innerVisible"
      >
         <el-form label-width="120px" :model="form1"  :rules="rules1" ref="form1">
          <el-form-item label="选择量表" prop="tableId">
              <el-select v-model="form1.tableId"  placeholder="请选择" @change="changeValue1" style="width:300px">
                <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="填写测试码人数" prop="allCount">
              <el-input v-model="form1.allCount" style="width:300px"></el-input>
          </el-form-item>

          
          <el-form-item label="联系电话" prop="groupPhone">
            <el-input v-model.number="form1.groupPhone" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="单位地址" prop="groupUnit">
            <el-input v-model.number="form1.groupUnit" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="联系二维码" prop="groupQrCode">
            <el-upload
              :headers='headers'
              class="avatar-uploader"
              :action="upImage+'/table/upload'"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
            >
            <img v-if="form1.groupQrCode" :src="form1.groupQrCode" class="avatar" />
          
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>


          <el-form-item label="备注" prop="content">
              <el-input v-model="form1.content" type="textarea"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import component from '@/components/*.vue'
import {getList,getAdd,getDsc,getUpdate,getWxList,getWxDsc,getWxUpdate} from '@/api/partner/index'
import { getList1, getDetails1} from "@/api/table/table";
import { getToken } from "@/utils/auth";

export default {
  name: '',
  data () {
    return {
      upImage: process.env.VUE_APP_BASE_API,
      headers: { Authorization: "Bearer " + getToken() },
      tableData:[],
      options:[],
      form:{},
      form1:{
        tableName:'',
        content:'',
        groupQrCode:'',
        groupPhone:'',
        groupUnit:'',
      },
      params: {
            pageNum: 1,
            pageSize: 10,
            agentType:3,
        },
      total:0,
      paramsFlag:0,
      outerVisible: false,
      innerVisible: false,
      rules:{},
      rules1:{
        tableId: [
          { required: true, message: '请选择测量表', trigger: 'change' }
        ],
        allCount: [
          { required: true, message: '请输入测试码人数', trigger: 'blur' }
        ],
      },
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    //上传图片
    handleAvatarSuccess(res, file) {
      this.form1.groupQrCode ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ res.data
        if(res.code ==200){
         this.$message.success("上传成功");
        }
        this.$forceUpdate();//手动更新data
    },
    // 搜索
    search(){
      this.tableData = []
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.getList();
    },
    onSubmit1(){
      // this.$refs["form1"].validate(valid => {
      //   if(valid){
      //      getWxUpdate(this.form).then(res=>{
      //       if(res.code == 200){
      //           this.$message.success('修改成功')
      //           this.outerVisible = false
      //       }
      //   })
      //   }
      // })
      // console.log(this.form);
       getWxUpdate(this.form).then(res=>{
            if(res.code == 200){
                this.$message.success('修改成功')
                this.outerVisible = false
            }
        })
    },
  onSubmit(){
    // console.log(this.form1);
     this.$refs["form1"].validate(valid => {
        if(valid){
           getAdd(this.form1).then(res=>{
            if(res.code == 200){
                this.$message.success('添加成功')
                this.innerVisible = false
            }
        })
        }
      })
    // getAdd(this.form1).then(res=>{
    //     if(res.code == 200){
    //         this.$message.success('添加成功')
    //         this.innerVisible = false
    //     }
    // })
  },
    // 获取测量表
    getTableList(){
      getList1().then(res =>{
        if(res.code == 200){
          this.options = res.rows
        }
      })
    },
    // 测量表详情
      changeValue1(val){
        getDetails1(val).then(res => {
        if(res.code == 200){
          // console.log(res);
          this.form1.tableName = res.data.name
        }
      })
      },
    // 团体合作商
     getList(){
        getWxList(this.params).then(res => {
          console.log(res);
          this.tableData = res.rows
          this.total = res.total
          // let a = res.rows
          // for (let i = 0; i < a.length; i++) {
          //   if(a[i].agentType ==3){
          //     this.tableData.push(a[i])
          //     this.total = this.tableData.length
          //   }
            
          // }
            // console.log(this.options1);
        });
      },
    // 查看
    handleLookClick(item){
      // console.log(item);
      this.$router.push({
        path: "/partner/cooperationScale",
         query:{
          name:item.name,
        }
      });
    },
    // changeValue(){},
    addSelect(row){
      this.innerVisible = true
      this.form1 = row
      this.form1.content = ""
    },
    // 修改按钮
    handleUpdateClick(row){
      this.form = row
      this.outerVisible = true
    },
  },
  created () {
    this.getList()
    this.getTableList()
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.box{
    margin: 10px;
    // .btn{
    //     margin: 10px;
    // }
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .table{
    padding-bottom: 20px;
  }
.box{
    margin: 10px;
    .btn{
        display: flex;
        // align-content: center;
        margin-top: 20px;
    }
}
.el-tooltip__popper {
  max-width: 60% !important;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  max-width: 50% !important;
  line-height: 24px;
  color: #fff !important;
  background-color: rgb(48, 65, 86) !important;
}
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.el-textarea__inner{
    height: 80px !important;
}
  .select {
  // display: block;
  margin-bottom: 10px;
  // vertical-align: middle;
}
 .el-row {
    margin-bottom: 20px !important;
    &:last-child {
      margin-bottom: 0 ;
    }
  }
</style>
